<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">

<head th:replace="~{common/head :: head}">
</head>

<body>
<!--  Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
     data-sidebar-position="fixed" data-header-position="fixed">
    <!-- Sidebar Start -->
    <aside th:replace="~{common/left-sidebar :: left-sidebar}"></aside>
    <!--  Sidebar End -->
    <!--  Main wrapper -->
    <div class="body-wrapper">
        <!--  Header Start -->
        <header th:replace="~{common/app-header :: app-header}"></header>
        <!--  Header End -->
        <!--        <div class="container-fluid">-->
        <div class="card" style="padding-top: 70px;">
            <div class="card-body">
                <div class="row">
                    <form th:action="@{/problem/index}" th:object="${problem}" method="post">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="标题 / 手机号 / 终端编号"
                                   th:field="*{title}" id="title">
                            <span class="input-group-btn">
							        <button class="btn btn-info" type="submit"> 查询问题 </button>
						        </span>
                        </div>
                    </form>
                </div>
                <!--                    <h4 class="card-title fw-semibold mb-4">运维问题列表</h4>-->
                <div class="row">
                    <div class="col-lg-12 d-flex align-items-stretch">
                        <div class="card w-100">
                            <div class="card-body p-4">
                                <a th:href="@{/problem/add}" class="btn btn-outline-info m-1">+ 新增问题</a>
                                <div class="table-responsive">
                                    <table class="table text-nowrap mb-0 align-middle">
                                        <thead class="text-dark fs-4">
                                        <tr>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">ID</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">标题</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">问题类型</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">IMEI号</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">归属人</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">手机号</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">发布时间</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">解决状态</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">解决时间</h6>
                                            </th>
                                            <th class="border-bottom-0">
                                                <h6 class="fw-semibold mb-0">操作</h6>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody th:each="problem,status:${list}">
                                        <tr>
                                            <td class="border-bottom-0"><h6 class="fw-semibold mb-0"
                                                                            th:text="${status.count}">1</h6></td>
                                            <td class="border-bottom-0">
                                                <a th:href="@{'/problem/info/'+${problem.problemId}}">
                                                    <h6 class="fw-semibold mb-1 text-truncate" style="max-width: 21pc;"
                                                        th:text="${problem.title}">问题描述</h6>
                                                </a>
                                            </td>
                                            <td class="border-bottom-0">
                                                <p class="mb-0 fw-normal" th:text="${problem.type}">Elite Admin</p>
                                            </td>
                                            <td class="border-bottom-0">
                                                <div class="d-flex align-items-center gap-2">
                                                    <span class="badge bg-primary rounded-3 fw-semibold"
                                                          th:text="${problem.imei}">Low</span>
                                                </div>
                                            </td>
                                            <td class="border-bottom-0">
                                                <p class="mb-0 fw-normal" th:text="${problem.owner}">$3.9</p>
                                            </td>
                                            <td class="border-bottom-0">
                                                <p class="mb-0 fw-normal" th:text="${problem.phone}">$3.9</p>
                                            </td>
                                            <td class="border-bottom-0">
                                                <p class="mb-0 fw-normal" th:text="${problem.openTime}">$3.9</p>
                                            </td>
                                            <td class="border-bottom-0">
                                                <p class="mb-0 fw-normal badge  rounded-3 fw-semibold"
                                                   th:classappend="${problem.status==0?'bg-danger':(problem.status==1?'bg-primary':(problem.status==2?'bg-success':'bg-secondary'))}"
                                                   th:text="${problem.status==0?'待处理':(problem.status==1?'处理中':(problem.status==2?'已完成':'已中断'))}">
                                                    $3.9</p>
                                            </td>
                                            <td class="border-bottom-0">
                                                <p class="mb-0 fw-normal" th:text="${problem.closeTime}">$3.9</p>
                                            </td>
                                            <td class="border-bottom-0">
                                                <a class="fw-normal">解决</a> | <a class="fw-normal">编辑</a> | <a
                                                    class="fw-normal">删除</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <nav aria-label="...">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link">首页</a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active" aria-current="page">
                                <a class="page-link" href="#">2</a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>

</html>